<!--
  功能：初始化功能描述
  作者：zichen-jiang
  邮箱：18307106535@163.com
  版本：v1.0.2
  修改内容：vue2.0初始化模板
  修改人员：zicheng-jiang
  修订时间：2020.10.01
  组件生成时间：2022年06月16日 14:24:57
-->
<template>
  <div class="Menubox">
    <a href="https://jiangsihan.cn">
      <img
        alt="X站-嘻哩嘻哩-图漫"
        src="@/assets/homelogo2.png"
        class="logo"
        title="X站-嘻哩嘻哩-图漫社区"
      />
    </a>
    <div>
      <a-menu v-model="current" mode="horizontal" @click="handleClick">
        <a-menu-item key="home">首页</a-menu-item>
        <!-- <a-menu-item key="community">社区</a-menu-item> -->
        <a-menu-item key="dynamic">动态</a-menu-item>
      </a-menu>
    </div>
  </div>
</template>
<script>
//import(导入)其他文件（如：组件，工具js，第三方插件js，json文件，图片文件等）

export default {
  name: "Menubox",
  /**注册组件*/
  components: {},
  /**接受父组件传值*/
  props: {},
  data() {
    return {
      current: ["home"],
    };
  },
  /**计算属性*/
  computed: {},
  /**监听data数据变化*/
  watch: {
    $route: function () {
      // console.log(this.$router);
    },
  },
  /**创建组件时执行(有VM对象this)*/
  created() {},
  /**加载完组件时执行(主要预处理数据)*/
  mounted() {
    let name = this.$router.currentRoute.name;
    if (name == "home" || name == "community" || name == "dynamic") {
      this.current = [name];
    } else {
      this.current = [];
    }
  },
  /**所有方法*/
  methods: {
    handleClick(item) {
      this.current = item.keyPath;
      this.$router.push({ name: item.key });
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
::v-deep .ant-menu-horizontal {
  border-bottom: #fff !important;
  height: 44px;
}
.Menubox {
  display: flex;
  align-items: center;
}

.logo {
  height: 30px;
  margin-right: 10px;
}

/* 如果浏览器窗口小于 500px */
@media only screen and (max-width: 500px) {
  .logo {
    display: none;
  }
}
</style>
